<template>
  <view class="sv-id-userinfo">
    <uni-list>
      <uni-list-item title="头像" link>
        <template v-slot:footer>
          <sv-id-pages-avatar width="140rpx" height="140rpx"></sv-id-pages-avatar>
        </template>
      </uni-list-item>
      <uni-list-item
        title="用户ID"
        :rightText="userInfo?._id"
        link
        @click="setClipboard(userInfo?._id)"
      />
      <uni-list-item
        v-if="userInfo?.username"
        title="用户名"
        :rightText="userInfo?.username"
        link
        @click="setClipboard(userInfo?.username)"
      />
      <uni-list-item title="昵称" :rightText="nickname" link @click="onNickname" />
    </uni-list>
    <view class="divider"></view>
    <uni-list>
      <uni-list-item v-if="userInfo?.role" title="用户角色" link>
        <template v-slot:footer>
          <uni-tag v-for="item in userInfo?.role" :key="item" :text="item" type="primary" />
        </template>
      </uni-list-item>
      <uni-list-item
        v-if="userInfo?.my_invite_code"
        title="邀请码"
        :rightText="userInfo?.my_invite_code"
        link
        @click="setClipboard(userInfo?.my_invite_code)"
      />
    </uni-list>
    <view class="divider"></view>
    <uni-list>
      <uni-list-item title="账号与安全" link @click="onSecurity" />
    </uni-list>
    <view class="divider"></view>
    <uni-list>
      <uni-list-item class="text-center" title="退出登录" clickable @click="onLogout" />
    </uni-list>
    <uni-popup ref="dialog" type="dialog">
      <uni-popup-dialog
        mode="input"
        :value="userInfo?.nickname"
        title="设置昵称"
        placeholder="请输入要设置的昵称"
        @confirm="setNickname"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { store, mutations } from '../../common/store'
export default {
  data() {
    return {}
  },
  computed: {
    userInfo() {
      return uni.getStorageSync('sv-id-pages-userInfo')
    },
    nickname() {
      return store.userInfo.nickname
    }
  },
  methods: {
    setClipboard(data) {
      if (!data) return
      uni.setClipboardData({
        data, // 需要复制到剪切板的内容
        showToast: true // 配置是否弹出提示，默认弹出提示
      })
    },
    onNickname() {
      this.$refs.dialog.open()
    },
    async setNickname(e) {
      if (!e) return
      await mutations.updateUserInfo({
        nickname: e
      })
      this.$refs.dialog.close()
    },
    onSecurity() {
      uni.navigateTo({
        url: '/uni_modules/sv-id-pages/pages/userinfo/security/security'
      })
    },
    onLogout() {
      uni.showModal({
        title: '退出登录',
        content: '确认退出登录吗?',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            mutations.logout()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.sv-id-userinfo {
  height: 100%;
  background-color: $uni-bg-color-grey;

  ::v-deep .uni-list-item__content-title {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .avatar-image {
    height: 120rpx;
    width: 120rpx;
  }
}

.divider {
  height: 24rpx;
}

.text-center {
  ::v-deep .uni-list-item__content-title {
    justify-content: center;
  }
}

.qrcode {
  width: 80vw;
  height: 60vh;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
  box-sizing: border-box;

  .qr-code {
    width: 200px;
    height: 200px;
    background-color: #66ccff;
  }
}
</style>
